Шаг 4. Решаем конфликт с помощью VS Code Merge Editor

Раньше у VS Code был простой инструмент решения конфликтов, но недавно разработчики выпустили для него обновление. Теперь мыможем использовать новый инструмент или вернуть старый.

Посмотрим, как они работают.

Перейдём в раздел Settings или «Параметры».

Пропишем в поиске git.mergeEditor.

Далее нам нужно убрать флажок, если хотим вернуть старый инструмент. Мы не будем этого делать, так как новый инструмент удобнее.

Нам также нужно установить Merge Editor для Git по умолчанию, чтобы его можно было вызывать из командной строки. Ведь если мы сейчас попробуем ввести команду git mergetool, то получим ошибку: не настроен ни один инструмент.

Перейдём в глобальный конфигурационный файл и после всех записей добавим следующее:

[merge]
  tool = vscode
[mergetool "vscode"]
  cmd = code --wait --merge $REMOTE $LOCAL $BASE $MERGED
[mergetool]
  keepBackup = false

Сохраняем файл.

Давайте разберём новые разделы:

• В [merge] с ключом tool мы указали редактор кода vscode как инструмент по умолчанию.
• В разделе [mergetool "vscode"] с ключом cmd мы указали, что после написания команды git mergetool должна открыться новая вкладка в редакторе кода VS Code для решения конфликта.
• В разделе [mergetool] с ключом keepBackup мы установили значение false, что означает «не нужно сохранять резервные копии после решённых конфликтов».

После этого закрываем конфигурационный файл.

Если мы сейчас пропишем команду git mergetool, то увидим совсем другую картину. Git сообщит, что файлов, нуждающихся в объединении, нет.

Теперь перейдём к основной части — созданию конфликта.

Создадим другую ветку — conflict/merge-editor — с помощью команды git switch --create conflict/merge-editor.

Далее внесём изменение в index.html. Добавим элементу <p> атрибут class со значением description.

После этого добавим изменение в индекс с помощью команды git add --all, а затем зафиксируем его с помощью команды git commit --message "feat: added the class attribute for a paragraph with the value description".

Затем переключимся на ветку main с помощью команды git switch main.

Снова изменим элемент <p>: добавим атрибут class со значением quote.

Теперь добавим это изменение в индекс — git add --all. Зафиксируем его — git commit --message "feat: added the class attribute for a paragraph with the value quote".

Переходим к слиянию веток и созданию конфликта. В этой же ветке пропишем команду git merge conflict/merge-editor --no-ff --message "feat: the branches were merged and the class attribute for the paragraph was added".

Образовался конфликт. Чтобы его решить, воспользуемся инструментом VS Code — Merge Editor, который мы до этого настраивали. Пропишем команду git mergetool.

Открылась новая вкладка — Merging: index.html. Далее нам нужно выбрать одно изменение или сразу оба. В нашем случае одно — атрибут class со значением description. Установим флажок напротив выделенной линии с нужным нам значением атрибута.

Если вам нужно применить оба изменения, установите флажок ещё и с другой стороны.

Чуть ниже в окне Result можно посмотреть, как будет выглядеть элемент <p> после решения конфликта. Раньше предварительного просмотра и этих окон не было — можно было только выбрать входящие изменение или текущие. И всё это отображалось в самом файле index.html.

Сохраним открытый файл — используем сочетание клавиш Ctrl + S. После этого нажмём на кнопку Accept Merge.

После этого окно закроется автоматически, и нас перебросит в раздел Source Control, где можно отредактировать текст коммита, если это нужно.

Далее у нас есть несколько вариантов:

• Мы можем сделать коммит, а потом нам придётся вручную отправлять изменения в удалённый репозиторий.
• Мы можем нажать на стрелку справа от кнопки Commit и затем выбрать Commit & Push. То есть VS Code сначала сделает коммит, а потом сам же отправит изменения в удалённый репозиторий.
• Мы можем выбрать Commit & Sync. Тогда сначала изменения будут зафиксированы, затем затянутся изменения с удалённого репозитория — если такие есть, и только затем изменения в локальном репозитории отправятся в удалённый.

Мы выбираем Commit & Push.

После этого закрываем раздел, нажав на иконку ветки или на кнопку раздела Source Control.

Далее пропишем команду git log --oneline. Так мы проверяем, что изменения действительно отправлены в удалённый репозиторий.

Наши коммиты находятся на удалённой ветке. Нам осталось только удалить временную ветку с помощью команды git branch -d conflict/merge-editor.

Ветка удалена. Надеемся, после демонстрации вы больше не будете опасаться конфликтов.